<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="35%">
    <!-- 表单 -->
    <el-form ref="ruleForm" :model="dataForm" :rules="dataRules" label-width="130px">
      <el-form-item label="用户名" prop="name">
        <el-input v-model="dataForm.name" style="width:80%" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="登录账号" prop="userName">
        <el-input v-model="dataForm.userName" style="width:80%" :disabled="disabledActive"
          placeholder="请输入登录账号"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="dataForm.password" style="width:80%" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="再次输入密码" prop="passwordTry">
        <el-input v-model="dataForm.passwordTry" style="width:80%" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="账号类型" prop="id">
        <el-select v-model="dataForm.id" placeholder="请选择" clearable filterable style="width:80%">
          <el-option v-for="item in accountTypeList" :key="item.id" :label="item.nameZh" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="type !== 'info'">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getRole } from '@/api/base'
import {
  addUserInfoRequest,
  getUserById,
  updateUserInfoRequest,
} from '@/api/other'
export default {
  data() {
    return {
      dialogVisible: false,
      title: '',
      type: '',
      dataForm: {
        name: '',
        userName: '',
        password: '',
        passwordTry: '',
        id: '', // 账号类型id
        userId: '', // 角色/账户id
      },
      dataRules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        userName: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码的长度在6~15个字符之间',
            trigger: 'blur',
          },
        ],
        passwordTry: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码的长度在6~15个字符之间',
            trigger: 'blur',
          },
        ],
        id: [{ required: true, message: '请选择账号类型', trigger: 'change' }],
      },
      accountTypeList: [], // 账号类型
      disabledActive: false,
    }
  },
  mounted() { },
  methods: {
    init(type, item) {
      this.dialogVisible = true
      this.title =
        type == 'new' ? '新增用户' : type == 'edit' ? '修改用户' : '详情'
      this.type = type
      this.dataForm.userId = item ? item.id : undefined
      if (type == 'new') {
        this.disabledActive = false
        this.dataRules.password[0].required = true
        this.dataRules.passwordTry[0].required = true
        for (var key in this.dataForm) {
          this.dataForm[key] = ''
        }
      } else {
        // 修改
        this.getUserByIdReq(item.id)
        //可能不是为了修改密码
        this.dataRules.password[0].required = false
        this.dataRules.passwordTry[0].required = false
        this.disabledActive = true
      }
      this.getRoleReq() // 角色类型
      this.$nextTick((_) => {
        this.$refs['ruleForm'].resetFields()
      })
    },
    getRoleReq() {
      getRole().then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        this.accountTypeList = data
      })
    },
    getUserByIdReq(id) {
      getUserById({ id }).then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        this.dataForm = { ...this.dataForm, ...data }
        this.dataForm.id = data.roleEntity && data.roleEntity['id'] //账号类型id
        console.log('this.dataForm', this.dataForm)
        // this.dataForm.usert = data.roleEntity && data.roleEntity['id']
      })
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return
        const { password, passwordTry } = this.dataForm
        if (password !== passwordTry)
          return this.$message.info('两次输入密码不一致!')
        let data = {
          name: this.dataForm.name,
          password: this.dataForm.password || undefined,
          rid: this.dataForm.id,
          userName: this.dataForm.userName,
          id: this.dataForm.userId,
        }
        const api =
          this.type == 'new'
            ? addUserInfoRequest(data)
            : updateUserInfoRequest(data)
        api.then((res) => {
          const { code, msg } = res
          if (code !== '0000') return this.$message.error(msg)
          this.dialogVisible = false
          this.$emit('updata')
        })
      })
    },
  },
}
</script>

<style>

</style>
